<template>
  <div id="app" style="height:100%;">


    <drawer
      width="200px;"
      :show.sync="drawerVisibility"
      :show-mode="showModeValue"
      :placement="showPlacementValue"
      :drawer-style="{'background-color':'#35495e', width: '200px'}">

      <div slot="drawer">
          <blur height="100" :blur-amount=40 :url="$store.getters.avatar">
            <p class="center"><img :src="$store.getters.avatar"></p>
          </blur>

        <group title="Drawer demo(beta)" style="margin-top:20px;">
          <cell title="Demo" link="/demo" value="演示" @click.native="drawerVisibility = false">
          </cell>
          <cell title="Buy me a coffee" link="project/donate" @click.native="drawerVisibility = false">
          </cell>
          <cell title="Github" link="http://github.com/airyland/vux" value="Star me" @click.native="drawerVisibility = false">
          </cell>
        </group>
        <group title="showMode">
          <radio v-model="showMode" :options="['push', 'overlay']" ></radio>
        </group>
        <group title="placement">
          <radio v-model="showPlacement" :options="['left', 'right']"></radio>
        </group>
        <group title="操作">
          <cell title="Quite" link="/login" value="退出" @click.native="logoutHandle">
          </cell>

        </group>

      </div>


      <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">
        <x-header
          v-if="isShowNav"
          slot="header"
          style="width:100%;position:absolute;left:0;top: 0;z-index:100;">
          <x-icon @click="drawerVisibility = !drawerVisibility" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>
          主页
        </x-header>

        <router-view></router-view>


        <tabbar >
          <tabbar-item>
            <img slot="icon" src="./assets/demo/icon_nav_button.png">
            <span slot="label">Wechat</span>
          </tabbar-item>
          <tabbar-item show-dot link="/message">
            <img slot="icon" src="./assets/demo/icon_nav_msg.png">
            <span slot="label">Message</span>
          </tabbar-item>
          <tabbar-item selected link="/component/demo">
            <img slot="icon" src="./assets/demo/icon_nav_article.png">
            <span slot="label">Explore</span>
          </tabbar-item>
          <tabbar-item badge="2" link="/new">
            <img slot="icon" src="./assets/demo/icon_nav_cell.png">
            <span slot="label">News</span>
          </tabbar-item>
        </tabbar>
      </view-box>
      <!-- rourer-view 作为默认插槽内容 -->


    </drawer>

  </div>

</template>

<script>
  import {Tabbar, TabbarItem,Drawer,ViewBox,Blur} from 'vux'

  export default {
      name: "App",
    components: {
      Tabbar,
      TabbarItem,
      Drawer,
      ViewBox,
      Blur

    },
    methods:{
      logoutHandle(){
        this.drawerVisibility =false;
        this.$store.dispatch('removeUserInfo');

        this.$router.push("/login")
      },

    },
    data () {
      return {
        menus: {
          menu1: 'Take Photo',
          menu2: 'Choose from photos'
        },
        showMenu: false,
        isShowNav: true,
        drawerVisibility: false,
        showMode: 'push',
        showModeValue: 'push',
        showPlacement: 'left',
        showPlacementValue: 'left',
        cols: 3,
      }
    },
  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/tap.less';
  html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  .center {
    text-align: center;

    padding-top: 5px;
    color: #fff;
    font-size: 18px;
  }
  .center img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid #ececec;
  }
</style>
